import { gql } from '@sb/webapp-api-client/graphql';
import { useQuery } from '@apollo/client';
import { Story } from '@storybook/react';
import { append } from 'ramda';

import { withProviders } from '../../../../shared/utils/storybook';
import { composeMockedQueryResult } from '../../../../tests/utils/fixtures';
import { {{ pascalCase name }}ListItem, {{ pascalCase name }}ListItemProps } from './{{ camelCase name }}ListItem.component';

const {{ camelCase name }}ListItemTestQuery = gql(/* GraphQL */ `
  query {{ camelCase name }}ListItemDefaultStoryQuery {
    item: {{ camelCase name }}(id: "test-id") {
      ...{{ camelCase name }}ListItemFragment
    }
  }
`);

const Template: Story<{{ pascalCase name }}ListItemProps> = (args: {{ pascalCase name }}ListItemProps) => {
  const { loading, data } = useQuery({{ camelCase name }}ListItemTestQuery);

  return !loading && data?.item ? <{{ pascalCase name }}ListItem {...args} item={data.item} /> : <span />;
};

export default {
  title: '{{ pascalCase name }} / {{ pascalCase name }}ListItem',
  component: {{ pascalCase name }}ListItem,
  decorators: [withProviders()],
};

export const Default = Template.bind({});
Default.decorators = [
  withProviders({
    apolloMocks: append(
      composeMockedQueryResult({{ camelCase name }}ListItemTestQuery, {
        data: {
          item: {
            __typename: '{{ pascalCase name }}Type',
            id: 1,
            name: 'Demo item name',
          },
        },
      })
    ),
  }),
];
Default.args = {};
